<!DOCTYPE html>



  


<html class="theme-next mist use-motion" lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.3" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.3">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.3">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.3">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.3" color="#222">





  <meta name="keywords" content="Hexo, NexT" />





  <link rel="alternate" href="/atom.xml" title="Likianta Blog" type="application/atom+xml" />






<meta name="description" content="1. 先看最终效果图 右分页布局中的控件比较多，难度也比之前的三章难很多。这里主要分成三大块来考虑：头像布局、常规填表界面以及所有功能按钮（本章只是做出个外形，数据绑定逻辑会在下章再讲）。 所以今天我们的重点仅放在制作界面布局上，只要让布局和效果图一样，我们的目标就算完成了。">
<meta property="og:type" content="article">
<meta property="og:title" content="04 Anykey右分页布局TableLayout">
<meta property="og:url" content="https://likianta.coding.me/2017/1126202934/index.html">
<meta property="og:site_name" content="Likianta Blog">
<meta property="og:description" content="1. 先看最终效果图 右分页布局中的控件比较多，难度也比之前的三章难很多。这里主要分成三大块来考虑：头像布局、常规填表界面以及所有功能按钮（本章只是做出个外形，数据绑定逻辑会在下章再讲）。 所以今天我们的重点仅放在制作界面布局上，只要让布局和效果图一样，我们的目标就算完成了。">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-1/74821111.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-1/41138137.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-1/56032793.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-1/95137658.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-1/52561376.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-1/11571824.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-1/56268114.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-1/97081592.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-11-23/5028616.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-1/15714081.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-11-25/90276703.jpg">
<meta property="og:updated_time" content="2017-12-31T15:26:08.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="04 Anykey右分页布局TableLayout">
<meta name="twitter:description" content="1. 先看最终效果图 右分页布局中的控件比较多，难度也比之前的三章难很多。这里主要分成三大块来考虑：头像布局、常规填表界面以及所有功能按钮（本章只是做出个外形，数据绑定逻辑会在下章再讲）。 所以今天我们的重点仅放在制作界面布局上，只要让布局和效果图一样，我们的目标就算完成了。">
<meta name="twitter:image" content="http://ozurciydg.bkt.clouddn.com/17-12-1/74821111.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    version: '5.1.3',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://likianta.coding.me/2017/1126202934/"/>





  <title>04 Anykey右分页布局TableLayout | Likianta Blog</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Likianta Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tutorials">
          <a href="/tags/tutorial-catalog/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            教程
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://likianta.coding.me/2017/1126202934/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Likianta">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://ozurciydg.bkt.clouddn.com/18-2-12/72826549.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Likianta Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">04 Anykey右分页布局TableLayout</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-11-26T20:29:34+08:00">
                2017-11-26
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/passport-pandora/" itemprop="url" rel="index">
                    <span itemprop="name">从零开发Anykey</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  5,855
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  26
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="1-先看最终效果图"><a href="#1-先看最终效果图" class="headerlink" title="1. 先看最终效果图"></a>1. 先看最终效果图</h1><p><img src="http://ozurciydg.bkt.clouddn.com/17-12-1/74821111.jpg" alt=""></p>
<p>右分页布局中的控件比较多，难度也比之前的三章难很多。<br>这里主要分成三大块来考虑：头像布局、常规填表界面以及所有功能按钮（本章只是做出个外形，数据绑定逻辑会在下章再讲）。</p>
<p>所以今天我们的重点仅放在制作界面布局上，只要让布局和效果图一样，我们的目标就算完成了。</p>
<a id="more"></a>
<p>在正式开始之前，我想说一下自己设计的初衷。<br>之前我在安卓手机上使用过一些密码管理软件，但多多少少在功能上没有达到预期：</p>
<table>
<thead>
<tr>
<th style="text-align:center">软件</th>
<th>缺点（2017年11月26日）</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">xykey</td>
<td><font>1. 最新版的备注栏不支持换行；<br>2. “密码2”有些多余，对我来说不常用；<br>3. 自定义选项不能设为默认出现；<br>4. 自定义选项不支持换行；<br>5. 自定义选项中的文字不能被搜索到；<br>6. 分类数量有限制（最多只有10个）；<br>7. 分类顺序不好修改；<br>8. 分类不能改自定义颜色；<br>9. 主页面切换分类时的表盘太小</font></td>
</tr>
<tr>
<td style="text-align:center">记住密码</td>
<td><font>1. 不支持全文搜索；<br>2. 不能搜索中文；<br>3. 自定义选项不能全局设置；<br>4. 分组不支持排序；<br>5. 列表排序混乱；<br>6. 图标的颜色是随机生成的，个人想要一种能根据分组、标签或者重要性来匹配颜色及颜色透明度的效果</font></td>
</tr>
<tr>
<td style="text-align:center">账号本子</td>
<td>1. 功能过于简洁，很多基本功能没有</td>
</tr>
<tr>
<td style="text-align:center">LastPass</td>
<td>1. 个人原因没有继续使用（遇到了几次输入主密码无法正常登录的问题）</td>
</tr>
</tbody>
</table>
<p>当然还有很多软件没有试过，比如KeePass、1Password、Passport等。我希望能有一款自用省心的软件，所以开始入坑，也希望大家看这个项目的开发过程能有所收获。</p>
<h1 id="2-制作右分页填表界面TableLayout"><a href="#2-制作右分页填表界面TableLayout" class="headerlink" title="2. 制作右分页填表界面TableLayout"></a>2. 制作右分页填表界面TableLayout</h1><p>在<code>page_item_new.xml</code>文件中输入以下代码：<br>（注：所有颜色均放在<code>res/values/colors.xml</code>文件中，后面提到了再写上）</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 常规表单填写 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">TableLayout</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:app</span>=<span class="string">"http://schemas.android.com/apk/res-auto"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:tools</span>=<span class="string">"http://schemas.android.com/tools"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:background</span>=<span class="string">"@color/mycolorBackground"</span></span></span><br><span class="line"><span class="tag"></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:padding</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:shrinkColumns</span>=<span class="string">"1"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:stretchColumns</span>=<span class="string">"1"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--TableLayout是一个难点。我们假设屏幕宽度被七等分</span></span><br><span class="line"><span class="comment">    其中第0列（注意是从零开始数的）是普通宽度</span></span><br><span class="line"><span class="comment">    第1-5列合并单元格（利用android:layout_span="5"可以实现“合并横向的5个单元格”的功能），用于显示编辑框</span></span><br><span class="line"><span class="comment">    最后一列第6列（注意是从零开始数的）是功能按钮</span></span><br><span class="line"><span class="comment">    也就是说每一行的控件宽度占比为“标题文字：编辑框：右侧按钮”=1:5:1</span></span><br><span class="line"><span class="comment">    </span></span><br><span class="line"><span class="comment">    shrinkColumns表示收缩列宽，stretchColumns表示扩展填充列宽。如果两个属性都设置，就表示该单元格在字数不多的时候扩展填充，字数单行容不下的时候会收缩到另起一行显示</span></span><br><span class="line"><span class="comment">    我们设定1列是shrinkColumns属性+stretchColumns属性，这样就能满足下面的控件需求了--&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">TableLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>PS：所有颜色均放在<code>res/values/colors.xml</code>文件中，下面把本章中所有用到的颜色都写上了：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">resources</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">color</span> <span class="attr">name</span>=<span class="string">"colorPrimary"</span>&gt;</span>#3F51B5<span class="tag">&lt;/<span class="name">color</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">color</span> <span class="attr">name</span>=<span class="string">"colorPrimaryDark"</span>&gt;</span>#303F9F<span class="tag">&lt;/<span class="name">color</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">color</span> <span class="attr">name</span>=<span class="string">"colorAccent"</span>&gt;</span>#FF4081<span class="tag">&lt;/<span class="name">color</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!--自制色卡--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">color</span> <span class="attr">name</span>=<span class="string">"mycolorLineShadow"</span>&gt;</span>#868686<span class="tag">&lt;/<span class="name">color</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">color</span> <span class="attr">name</span>=<span class="string">"mycolorText1"</span>&gt;</span>#000000<span class="tag">&lt;/<span class="name">color</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">color</span> <span class="attr">name</span>=<span class="string">"mycolorText2"</span>&gt;</span>#8e8e8e<span class="tag">&lt;/<span class="name">color</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">color</span> <span class="attr">name</span>=<span class="string">"mycolorPurple"</span>&gt;</span>#6000c0<span class="tag">&lt;/<span class="name">color</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">color</span> <span class="attr">name</span>=<span class="string">"mycolorPurpleInactive"</span>&gt;</span>#8668a5<span class="tag">&lt;/<span class="name">color</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">color</span> <span class="attr">name</span>=<span class="string">"mycolorBackground"</span>&gt;</span>#dedede<span class="tag">&lt;/<span class="name">color</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!--selector点击变色--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">color</span> <span class="attr">name</span>=<span class="string">"selectorColor"</span>&gt;</span>#9848eafc<span class="tag">&lt;/<span class="name">color</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">color</span> <span class="attr">name</span>=<span class="string">"selectorColorPressed"</span>&gt;</span>#98297179<span class="tag">&lt;/<span class="name">color</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">resources</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>TableLayout设置好了以后，我们要在里面添加6行栏目。下面依次说明：</p>
<h2 id="2-1-第一行：标题"><a href="#2-1-第一行：标题" class="headerlink" title="2.1. 第一行：标题"></a>2.1. 第一行：标题</h2><p><img src="http://ozurciydg.bkt.clouddn.com/17-12-1/41138137.jpg" alt=""></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">TableLayout</span> <span class="attr">...</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 第一行，标题栏 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/tableRow1"</span>&gt;</span></span><br><span class="line">            </span><br><span class="line">        <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:text</span>=<span class="string">"标题"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textSize</span>=<span class="string">"20sp"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userTitle"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_span</span>=<span class="string">"5"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:background</span>=<span class="string">"@drawable/bg_edittext"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:paddingLeft</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:paddingRight</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:singleLine</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textSize</span>=<span class="string">"20sp"</span> /&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- span表示跨5列，类似于合并单元格功能 --&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 分组按钮 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userTitleGroup"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:src</span>=<span class="string">"@drawable/icon_folder"</span> /&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- 图标是由src来加载的，本章中用到的图标的来源网站下面会贴出来 --&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">TableLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>代码中的编辑框和分组按钮分别用到了两个drawable资源，代码如下：</p>
<p><font>1. 编辑框属性<code>android:background=&quot;@drawable/bg_edittext&quot;</code>（在res/drawable/目录下新建“bg_edittext.xml”）：</font></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">layer-list</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- layer-list用于制作多层叠加的形状组合，item的添加顺序是由底到上 --&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">item</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 底层形状是一个透明的矩形 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">shape</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">solid</span> <span class="attr">android:color</span>=<span class="string">"#0000"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">shape</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">item</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!-- 上层形状则是一个左右各内缩10dp的圆角矩形，这样设计可以让编辑框看起来和左右两侧各留出了一定的空隙，看起来更美观，而且省去了编辑框的MarginLeft、MarginRight属性，可重复使用 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">item</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:left</span>=<span class="string">"10dp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:right</span>=<span class="string">"10dp"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">shape</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">solid</span> <span class="attr">android:color</span>=<span class="string">"#ffffff"</span> /&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">corners</span> <span class="attr">android:radius</span>=<span class="string">"4dp"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">shape</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">item</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">layer-list</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><font>2. ImageView素材<code>android:src=&quot;@drawable/icon_archive&quot;</code>  </font></p>
<p><strong>图标素材来源网站：<a href="https://www.easyicon.net" target="_blank" rel="noopener">EasyIcon</a></strong><br>本章中用到的所有图标已打包为压缩包放在了我的百度网盘：链接: <a href="https://pan.baidu.com/s/1bYw5au" target="_blank" rel="noopener">https://pan.baidu.com/s/1bYw5au</a> 密码: p85s<br>使用时解压然后全部复制，再在<code>res/drawable</code>目录按Ctrl+V即可粘贴。  </p>
<p>PS：按shift+f6可对<code>res/drawable/</code>中的文件改名，<strong>改名后所有应用该样式的代码也会自动变名的</strong>，所以不用担心。</p>
<p>更多了解可参考：  </p>
<ol>
<li>Android必知必会–使用shape制作drawable素材 - 他叫自己Mr.张 - CSDN博客 <a href="http://blog.csdn.net/ys743276112/article/details/46227945#" target="_blank" rel="noopener">http://blog.csdn.net/ys743276112/article/details/46227945#</a>  </li>
<li>android shape的使用 - 炽飞 - 博客园 <a href="https://www.cnblogs.com/cyanfei/archive/2012/07/27/2612023.html" target="_blank" rel="noopener">https://www.cnblogs.com/cyanfei/archive/2012/07/27/2612023.html</a></li>
</ol>
<h2 id="2-2-第二行：帐号"><a href="#2-2-第二行：帐号" class="headerlink" title="2.2. 第二行：帐号"></a>2.2. 第二行：帐号</h2><p><img src="http://ozurciydg.bkt.clouddn.com/17-12-1/56032793.jpg" alt=""></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">TableLayout</span> <span class="attr">...</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow1"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 第二行，帐号栏 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/tableRow2"</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:text</span>=<span class="string">"帐号"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textSize</span>=<span class="string">"20sp"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userName"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_span</span>=<span class="string">"5"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:background</span>=<span class="string">"@drawable/bg_edittext"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:paddingLeft</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:paddingRight</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:singleLine</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textSize</span>=<span class="string">"20sp"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 这个按钮是用来关联同标题的小号的，点击后会让你设置哪个是大号，哪个是隐私号，哪些是小号……</span></span><br><span class="line"><span class="comment">        小号还可以手动排序 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userNameLink"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:padding</span>=<span class="string">"2dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:src</span>=<span class="string">"@drawable/icon_attach"</span> /&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- 由于放进去的图片有点大，所以用了padding属性让它往里缩了一点 --&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">TableLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>代码跟第一行的差不多，只不过是左侧的文字和右边的src素材变了。</p>
<h2 id="2-3-第三行：密码"><a href="#2-3-第三行：密码" class="headerlink" title="2.3. 第三行：密码"></a>2.3. 第三行：密码</h2><p><img src="http://ozurciydg.bkt.clouddn.com/17-12-1/95137658.jpg" alt=""></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">TableLayout</span> <span class="attr">...</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow1"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow2"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 第三行，密码栏 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/tableRow3"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:text</span>=<span class="string">"密码"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textSize</span>=<span class="string">"20sp"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userPassword"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_span</span>=<span class="string">"5"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:background</span>=<span class="string">"@drawable/bg_edittext"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:paddingLeft</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:paddingRight</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:singleLine</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textSize</span>=<span class="string">"20sp"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 随机密码生成按钮 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userPasswordRandom"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:padding</span>=<span class="string">"4dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:src</span>=<span class="string">"@drawable/icon_random"</span> /&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">TableLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>代码跟前面的差不多，同样只不过是左侧的文字和右边的src素材变了。</p>
<h2 id="2-4-第四行：绑定"><a href="#2-4-第四行：绑定" class="headerlink" title="2.4. 第四行：绑定"></a>2.4. 第四行：绑定</h2><p><img src="http://ozurciydg.bkt.clouddn.com/17-12-1/52561376.jpg" alt=""></p>
<p>该行比较特殊，也是本次学习的一个难点。<br>首先要解决布局问题，我们不再在中间做EditText了，而是用一个横向的滚动栏（HorizontalScrollView）代替，滚动栏整体是居中的。<br>在滚动栏里面可以添加任意多个快捷绑定键，后面会在设置中进行自定义设置。<br>然后是加入图标。刚才我打包好的文件中已经包含了本次需要用到的所有图标。你也可以在EasyIcon网站自寻下载。</p>
<p>代码如下：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">TableLayout</span> <span class="attr">...</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow1"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow2"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow3"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 第四行，比较特殊，是一排绑定按钮 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/tableRow4"</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:text</span>=<span class="string">"绑定"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textSize</span>=<span class="string">"20sp"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 这些绑定按钮可自定义还可横向滚动 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">HorizontalScrollView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userBoundBar"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_span</span>=<span class="string">"5"</span>&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="tag">&lt;<span class="name">LinearLayout</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span>&gt;</span></span><br><span class="line">                </span><br><span class="line">                <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:id</span>=<span class="string">"@+id/userBoundQq"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_width</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_margin</span>=<span class="string">"15dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:src</span>=<span class="string">"@drawable/icon_bound_qq"</span> /&gt;</span></span><br><span class="line">                </span><br><span class="line">                <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:id</span>=<span class="string">"@+id/userBoundWeixin"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_width</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_margin</span>=<span class="string">"15dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:src</span>=<span class="string">"@drawable/icon_bound_weixin"</span> /&gt;</span></span><br><span class="line">                </span><br><span class="line">                <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:id</span>=<span class="string">"@+id/userBoundWeibo"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_width</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_margin</span>=<span class="string">"15dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:src</span>=<span class="string">"@drawable/icon_bound_weibo"</span> /&gt;</span></span><br><span class="line">                </span><br><span class="line">                <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:id</span>=<span class="string">"@+id/userBoundPhone"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_width</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_margin</span>=<span class="string">"15dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:src</span>=<span class="string">"@drawable/icon_bound_phone"</span> /&gt;</span></span><br><span class="line">                </span><br><span class="line">                <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:id</span>=<span class="string">"@+id/userBoundEmail"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_width</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_margin</span>=<span class="string">"15dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:src</span>=<span class="string">"@drawable/icon_bound_email"</span> /&gt;</span></span><br><span class="line">                </span><br><span class="line">                <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:id</span>=<span class="string">"@+id/userBoundWangyi"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_width</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:layout_margin</span>=<span class="string">"15dp"</span></span></span><br><span class="line"><span class="tag">                    <span class="attr">android:src</span>=<span class="string">"@drawable/icon_bound_wangyi"</span> /&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">LinearLayout</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">HorizontalScrollView</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 对绑定按钮进行详细设置，比如默认值、同类型小号（红色显示）、新增自定义字段等 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userBoundMore"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:src</span>=<span class="string">"@drawable/icon_more"</span> /&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">TableLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="2-5-第五行：URL"><a href="#2-5-第五行：URL" class="headerlink" title="2.5. 第五行：URL"></a>2.5. 第五行：URL</h2><p><img src="http://ozurciydg.bkt.clouddn.com/17-12-1/11571824.jpg" alt=""></p>
<p>URL编辑框默认是单行的，而右边的按钮可以切换其属性为多行。</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">TableLayout</span> <span class="attr">...</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow1"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow2"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow3"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow4"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 第五行，URL --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/tableRow5"</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:text</span>=<span class="string">"URL"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textSize</span>=<span class="string">"20sp"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 默认是单行输入的 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userUrl"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_span</span>=<span class="string">"5"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:background</span>=<span class="string">"@drawable/bg_edittext"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:paddingLeft</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:paddingRight</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:singleLine</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textSize</span>=<span class="string">"20sp"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 通过此按钮可以切换单/多行输入模式 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userUrlMultilines"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:src</span>=<span class="string">"@drawable/icon_add2"</span> /&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 因为图标素材很小，所以就让它居中显示了 --&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">TableLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="2-6-第六行（最后一行）：备注栏"><a href="#2-6-第六行（最后一行）：备注栏" class="headerlink" title="2.6. 第六行（最后一行）：备注栏"></a>2.6. 第六行（最后一行）：备注栏</h2><p><img src="http://ozurciydg.bkt.clouddn.com/17-12-1/56268114.jpg" alt=""></p>
<p>注意备注栏是多行显示的。</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">TableLayout</span> <span class="attr">...</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow1"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow2"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow3"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow4"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/tableRow5"</span>&gt;</span>...<span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- 第六行，备注栏 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">TableRow</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/tableRow6"</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 备注栏是多行输入的 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userNote"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_marginTop</span>=<span class="string">"15dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_span</span>=<span class="string">"7"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:background</span>=<span class="string">"@drawable/bg_edittext"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:hint</span>=<span class="string">"请在此输入备注"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:padding</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:paddingLeft</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:paddingRight</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textSize</span>=<span class="string">"16sp"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line">                </span><br><span class="line"><span class="tag">&lt;/<span class="name">TableLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>至此，布局部分基本完成。实际运行一下，发现该页面尚不能滑动，所以下面我们还要给这个TableLayout添加外布局……</p>
<h1 id="2-7-给TableLayout包裹“外衣”"><a href="#2-7-给TableLayout包裹“外衣”" class="headerlink" title="2.7. 给TableLayout包裹“外衣”"></a>2.7. 给TableLayout包裹“外衣”</h1><p>为了让TableLayout能够滑动，要给它包装两层“外衣”：</p>
<p><code>1. ScrollView &gt; 2. RelativeLayout &gt; 3. TableLayout</code></p>
<p>依次解释一下其作用：</p>
<ol>
<li>ScrollView是为了保证该页面可上下滑动，这样就解决了软键盘的遮挡问题</li>
<li>由于ScrollView规定只能包含一个子控件，所以为了后期添加新控件不会出问题，我们紧跟着用一个RelativeLayout贴到它的内层，这样以后想在滑动布局中加入新控件，只需在RelativeLayout中添加即可</li>
</ol>
<p>那么这样一来<code>page_item_new.xml</code>的代码就变成了：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ScrollView</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:app</span>=<span class="string">"http://schemas.android.com/apk/res-auto"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:tools</span>=<span class="string">"http://schemas.android.com/tools"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:background</span>=<span class="string">"@color/mycolorBackground"</span></span></span><br><span class="line"><span class="tag"></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:padding</span>=<span class="string">"5dp"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--注意把原TableLayout中的命名空间（xmlns...）以及背景色全部移到最外层布局里--&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">RelativeLayout</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:orientation</span>=<span class="string">"vertical"</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 这里使用的是RelativeLayout。因为考虑到以后可能还需要在里面贴一些相对位置属性的控件等……所以用相对布局更好一些 --&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">TableLayout</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:padding</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:shrinkColumns</span>=<span class="string">"1"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:stretchColumns</span>=<span class="string">"1"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            ...</span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;/<span class="name">TableLayout</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">ScrollView</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>另外给备注栏附加一个分割线按钮，用于在书写的备注内容过多的时候画几条分割线来分割段落：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ScrollView</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--注意把原TableLayout中的命名空间（xmlns...）以及背景色全部移到最外层布局里--&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">TableLayout</span>&gt;</span></span><br><span class="line">            ...</span><br><span class="line">        <span class="tag">&lt;/<span class="name">TableLayout</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- 注意分割线按钮控件是写在TableLayout外面的！ --&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 这个小按钮比较特殊，是专为备注栏服务的，功能是点击一下生成一条分割线 --&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 默认状态是隐藏的，只有当备注栏获取焦点时才会出现 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userNoteSlash"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_alignBottom</span>=<span class="string">"@id/table1"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_alignParentEnd</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_marginBottom</span>=<span class="string">"32dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_marginEnd</span>=<span class="string">"10dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:src</span>=<span class="string">"@drawable/icon_slash"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">ScrollView</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>PS：使用<code>Ctrl+Alt+L</code>可以自动调整代码排版。（如果该快捷键不管用，注意查看是否被第三方软件的热键占用了。）</p>
<p>当然，别忘了效果图中的头像界面还没有制作呢！</p>
<h1 id="3-制作头像布局"><a href="#3-制作头像布局" class="headerlink" title="3. 制作头像布局"></a>3. 制作头像布局</h1><p><img src="http://ozurciydg.bkt.clouddn.com/17-12-1/97081592.jpg" alt=""></p>
<h2 id="3-1-头像布局"><a href="#3-1-头像布局" class="headerlink" title="3.1. 头像布局"></a>3.1. 头像布局</h2><p>还是在<code>page_item_new.xml</code>中增加代码：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ScrollView</span> <span class="attr">...</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">RelativeLayout</span> <span class="attr">...</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!-- 头像的背景，根据头像主色调来生成（方法在函数中实现） --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userHeadBackground"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"108dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:background</span>=<span class="string">"#8e8e8e"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 使用开源控件CircleImageView制作圆形头像</span></span><br><span class="line"><span class="comment">        后面会说明CircleImageView的依赖方法 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">de.hdodenhof.circleimageview.CircleImageView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userHead"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"96dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"96dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_centerHorizontal</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_marginTop</span>=<span class="string">"60dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:padding</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:src</span>=<span class="string">"@drawable/avatar_test"</span> /&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- 这张图片是用来测试的 --&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 常规表单填写 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">TableLayout</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">...</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_below</span>=<span class="string">"@id/userHead"</span>&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- 新增一个相对位置的属性，因为TableLayout要处于用户头像之下 --&gt;</span></span><br><span class="line"></span><br><span class="line">            ...</span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;/<span class="name">TableLayout</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">ScrollView</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>其中用到了开源控件CircleImageView，下面介绍它的安装方法：</p>
<h2 id="3-2-CircleImageView"><a href="#3-2-CircleImageView" class="headerlink" title="3.2. CircleImageView"></a>3.2. CircleImageView</h2><p>CircleImageView是一款开源控件，用于制作圆形用户头像。<br>CircleImageView的Github项目地址：hdodenhof/CircleImageView: A circular ImageView for Android <a href="https://github.com/hdodenhof/CircleImageView" target="_blank" rel="noopener">https://github.com/hdodenhof/CircleImageView</a></p>
<p>CircleImageView的安装：</p>
<p>首先在app:build.gradle中添加对它的依赖：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">dependencies &#123;</span><br><span class="line">    ...</span><br><span class="line">    compile <span class="string">'de.hdodenhof:circleimageview:2.2.0'</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>别忘点击页面右上角的“Sync Now”：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-11-23/5028616.jpg" alt="Sync Now"></p>
<p>然后就可以正常使用它了，步骤就这么简单。<br>这里暂时用一个测试头像代替。在后面的章节中将着重讲解ImageView的加载和保存方法。</p>
<p>至此，核心内容已经基本完成了。下面是一些细枝末节的处理工作。</p>
<h1 id="4-完善布局"><a href="#4-完善布局" class="headerlink" title="4. 完善布局"></a>4. 完善布局</h1><h2 id="4-1-制作底部的保存按钮"><a href="#4-1-制作底部的保存按钮" class="headerlink" title="4.1. 制作底部的保存按钮"></a>4.1. 制作底部的保存按钮</h2><p>保存按钮要放在屏幕的底部，这点有一个注意的事情，就是ScrollView做不到这件事情。所以我们要在ScrollView外面再包裹一个RelativeLayout（里面的TableLayout变成3层嵌套了），然后制作这个Button：</p>
<p><code>page_item_new.xml</code>整体代码：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">RelativeLayout</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:app</span>=<span class="string">"http://schemas.android.com/apk/res-auto"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:tools</span>=<span class="string">"http://schemas.android.com/tools"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:background</span>=<span class="string">"@color/mycolorBackground"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:padding</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag"></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--注意把原ScrollView中的命名空间（xmlns...）以及背景值还有padding值全部移到最外层布局里--&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">ScrollView</span> <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_above</span>=<span class="string">"@id/linearLayout"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_marginBottom</span>=<span class="string">"5dp"</span>&gt;</span></span><br><span class="line">        ...</span><br><span class="line">    <span class="tag">&lt;/<span class="name">ScrollView</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">LinearLayout</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/linearLayout"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_alignParentBottom</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:orientation</span>=<span class="string">"vertical"</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 保存按钮 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">Button</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/userInfoSave"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:background</span>=<span class="string">"@drawable/bg_button"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:text</span>=<span class="string">"保存"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textColor</span>=<span class="string">"@drawable/selector_textcolor"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:textSize</span>=<span class="string">"20sp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:visibility</span>=<span class="string">"visible"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">LinearLayout</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>注意保存按钮用到了两个drawable文件，一个是背景bg_button.xml，还有一个是selector_textcolor.xml，是用于点击时文字由黑变白色的。具体代码如下：</p>
<p><font>1. <code>bg_button.xml</code>是一个白色背景加海蓝色边框的圆角矩形，按下时背景和边框颜色交换过来：</font></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;?xml version="1.0" encoding="UTF-8"?&gt;<span class="comment">&lt;!--http://blog.csdn.net/xiaoguda1/article/details/52084248--&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">selector</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!--按压时的背景图片--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">item</span> <span class="attr">android:state_pressed</span>=<span class="string">"true"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">shape</span> <span class="attr">android:shape</span>=<span class="string">"rectangle"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">corners</span> <span class="attr">android:radius</span>=<span class="string">"8dp"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="tag">&lt;<span class="name">solid</span> <span class="attr">android:color</span>=<span class="string">"@color/colorPrimary"</span>&gt;</span><span class="tag">&lt;/<span class="name">solid</span>&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="tag">&lt;<span class="name">stroke</span> <span class="attr">android:width</span>=<span class="string">"1dp"</span> <span class="attr">android:color</span>=<span class="string">"#ffffff"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">shape</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">item</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!--默认状态的背景图片--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">item</span> <span class="attr">android:state_window_focused</span>=<span class="string">"false"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">shape</span> <span class="attr">android:shape</span>=<span class="string">"rectangle"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">corners</span> <span class="attr">android:radius</span>=<span class="string">"8dp"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="tag">&lt;<span class="name">solid</span> <span class="attr">android:color</span>=<span class="string">"#ffffff"</span>&gt;</span><span class="tag">&lt;/<span class="name">solid</span>&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="tag">&lt;<span class="name">stroke</span> <span class="attr">android:width</span>=<span class="string">"1dp"</span> <span class="attr">android:color</span>=<span class="string">"@color/colorPrimary"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">shape</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">item</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">selector</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><font>2. <code>selector_textcolor.xml</code>默认状态是黑色字体，按下时变为白色字体：</font></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">selector</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">item</span> <span class="attr">android:color</span>=<span class="string">"#ffffff"</span> <span class="attr">android:state_pressed</span>=<span class="string">"true"</span>&gt;</span><span class="tag">&lt;/<span class="name">item</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">item</span> <span class="attr">android:color</span>=<span class="string">"#000000"</span>&gt;</span><span class="tag">&lt;/<span class="name">item</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">selector</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>实际运行一下，会发现键盘在左右滑动布局的时候不会自动收起来，下面来解决这个bug：</p>
<h2 id="4-2-解决bug：左右滑动布局，键盘不会自动收起来"><a href="#4-2-解决bug：左右滑动布局，键盘不会自动收起来" class="headerlink" title="4.2. 解决bug：左右滑动布局，键盘不会自动收起来"></a>4.2. 解决bug：左右滑动布局，键盘不会自动收起来</h2><p>解决方法：滑动到左分页时强制隐藏软键盘</p>
<p>具体思路：<br>在MainActivity.java &gt; 页面监听器（MyOnPageChangeListener） &gt; 检测滑动到page[0]时加入强制隐藏软键盘的代码：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MainActivity</span> <span class="keyword">extends</span> <span class="title">AppCompatActivity</span> <span class="keyword">implements</span> <span class="title">View</span>.<span class="title">OnClickListener</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    ...</span><br><span class="line"></span><br><span class="line">    <span class="comment">//页面滚动监听器功能，实现标签页左右滑动切换效果</span></span><br><span class="line">    <span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MyOnPageChangeListener</span> <span class="keyword">implements</span> <span class="title">ViewPager</span>.<span class="title">OnPageChangeListener</span> </span>&#123;</span><br><span class="line">        </span><br><span class="line">        <span class="meta">@Override</span></span><br><span class="line">        <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onPageSelected</span><span class="params">(<span class="keyword">int</span> index)</span> </span>&#123;</span><br><span class="line">            <span class="keyword">switch</span> (index) &#123;</span><br><span class="line">                <span class="keyword">case</span> <span class="number">0</span>: <span class="comment">//滑动到左分页时的业务</span></span><br><span class="line">                    titleAll.setTextColor(<span class="number">0xff000000</span>);<span class="comment">//0x表示整型，ff表示透明度为0，最后的6位数字表示颜色，必须这样写，不能省略</span></span><br><span class="line">                    titleNew.setTextColor(<span class="number">0xff8e8e8e</span>);</span><br><span class="line">                    InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);</span><br><span class="line">                    inputMethodManager.hideSoftInputFromWindow(MainActivity.<span class="keyword">this</span>.getCurrentFocus().getWindowToken(), <span class="number">0</span>); <span class="comment">//强制隐藏软键盘</span></span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">                <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">                    ...</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">        ...</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>至此，本章的布局已经全部制作完成。<br>再次运行一下，效果图如下所示：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-1/15714081.jpg" alt=""></p>
<p><em>点击展开软键盘，按Enter键会自动跳转到下一行输入（这是系统自动判断的），滑动效果正常，按保存按钮会变色（gif图中没有演示）。</em><br>不过仍然存在一些问题，比如备注栏的EditText的底边似乎被“遮挡”住一部分（这个只是看起来像，因为备注栏跳转后的光标会和软键盘的顶部紧紧贴在一起，看起来就像遮住了一点点光标的样子）、顶部标题栏不能跟随滑动收起来、指示器的位置不准确（演示图中是修改过的，实际上本章的运行图中指示器的位置本该是照不准的）等。我们会在后期更新中逐渐完善。</p>
<p><br></p>
<p>注（2017年12月1日）：数据绑定放在下下章节（06章）讲。下章节（05章）是关于前面四章出现的所有bug的汇总解决。</p>
<hr>
<h1 id="5-其他说明"><a href="#5-其他说明" class="headerlink" title="5. 其他说明"></a>5. 其他说明</h1><h2 id="5-1-ImageView中设置的selector不起作用的解决方法"><a href="#5-1-ImageView中设置的selector不起作用的解决方法" class="headerlink" title="5.1. ImageView中设置的selector不起作用的解决方法"></a>5.1. ImageView中设置的selector不起作用的解决方法</h2><p>以下两个步骤缺一不可：</p>
<ol>
<li>ImageView设置为可点击的属性：android:clickable=”true”</li>
<li>shape中的selector顺序为先写点击时的背景状态，再写默认的背景状态</li>
</ol>
<p>参考：</p>
<ol>
<li>怎么设置selector：<a href="http://blog.csdn.net/qq_20785431/article/details/50198315" target="_blank" rel="noopener">http://blog.csdn.net/qq_20785431/article/details/50198315</a></li>
<li>设置的selector不起作用的原因：<a href="http://blog.csdn.net/lyankj/article/details/62871799" target="_blank" rel="noopener">http://blog.csdn.net/lyankj/article/details/62871799</a></li>
</ol>
<h2 id="5-2-TableLayout中为什么使用ImageView而不使用ImageButton？"><a href="#5-2-TableLayout中为什么使用ImageView而不使用ImageButton？" class="headerlink" title="5.2. TableLayout中为什么使用ImageView而不使用ImageButton？"></a>5.2. TableLayout中为什么使用ImageView而不使用ImageButton？</h2><p>参考CSDN博主@猪头_ZT 的一段话：</p>
<blockquote>
<p>ImageView会根据设置的具体宽高尺寸变化，但是ImageButton只会显示图片的原始像素大小。当然，给ImageButton设置scaletype属性是可以完成ImageView的效果，但是那样会使图片失真。</p>
</blockquote>
<p>（原文地址：<a href="http://blog.csdn.net/qq_27376951/article/details/51810829" target="_blank" rel="noopener">http://blog.csdn.net/qq_27376951/article/details/51810829</a> ）</p>
<p>所以本文中使用的是ImageView，而没有用ImageButton。</p>
<h2 id="5-3-关于TableLayout"><a href="#5-3-关于TableLayout" class="headerlink" title="5.3. 关于TableLayout"></a>5.3. 关于TableLayout</h2><p>特别注意，TableLayout的列数是从零开始数的：第0列、第1列、第2列……  </p>
<p>深入学习可参考：android:TableLayout表格布局详解 - CSDN博客 <a href="http://blog.csdn.net/justoneroad/article/details/6835915" target="_blank" rel="noopener">http://blog.csdn.net/justoneroad/article/details/6835915</a></p>
<h2 id="5-4-Android-Studio查找替换快捷键"><a href="#5-4-Android-Studio查找替换快捷键" class="headerlink" title="5.4. Android Studio查找替换快捷键"></a>5.4. Android Studio查找替换快捷键</h2><p>由于在6行3列表格中经常要批量调整每一行的字体等参数的数值，所以大家可能非常需要用到Android Studio的查找替换快捷键：<code>Ctrl+R</code></p>
<hr>
<h1 id="6-更新修复"><a href="#6-更新修复" class="headerlink" title="6. 更新修复"></a>6. 更新修复</h1><h2 id="6-1-【修改】主界面标题栏颜色改为纯白色"><a href="#6-1-【修改】主界面标题栏颜色改为纯白色" class="headerlink" title="6.1. 【修改】主界面标题栏颜色改为纯白色"></a>6.1. 【修改】主界面标题栏颜色改为纯白色</h2><p>系统默认的颜色不是纯白色，而是比白色稍微灰一点的颜色；如果改为纯白色，二者的对比图如下：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-11-25/90276703.jpg" alt=""></p>
<p>（左边的标题栏是系统默认的白色，右边是<code>android:background=&quot;#ffffff&quot;</code>的纯白色）</p>
<p>具体代码为：</p>
<p><code>activity_main.xml</code>:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">RelativeLayout</span> <span class="attr">...</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!--LinearLayout代替原标题栏的位置--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">LinearLayout</span></span></span><br><span class="line"><span class="tag">        <span class="attr">...</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:background</span>=<span class="string">"#ffffff"</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        ...</span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">LinearLayout</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    ...</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="6-2-【修改】登录界面软键盘回车键显示为“进入”"><a href="#6-2-【修改】登录界面软键盘回车键显示为“进入”" class="headerlink" title="6.2. 【修改】登录界面软键盘回车键显示为“进入”"></a>6.2. 【修改】登录界面软键盘回车键显示为“进入”</h2><p>不同输入法的测试情况不同，搜狗、百度、系统输入法使用此方法均有效：</p>
<p><code>activity_login.xml</code>:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ScrollView</span> <span class="attr">...</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;<span class="name">LinearLayout</span> <span class="attr">...</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        ...</span><br><span class="line"></span><br><span class="line">        <span class="comment">&lt;!--编辑框，输入主密码--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">            <span class="attr">...</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:imeOptions</span>=<span class="string">"actionGo"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;/<span class="name">LinearLayout</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">ScrollView</span>&gt;</span></span><br></pre></td></tr></table></figure>
<hr>
<h1 id="相关参考"><a href="#相关参考" class="headerlink" title="相关参考"></a>相关参考</h1><ol>
<li><strong>android:TableLayout表格布局详解 - CSDN博客 <a href="http://blog.csdn.net/justoneroad/article/details/6835915" target="_blank" rel="noopener">http://blog.csdn.net/justoneroad/article/details/6835915</a> </strong></li>
<li>Android–EditText属性之ImeOption详解 - Geek Nero - CSDN博客 <a href="http://blog.csdn.net/geekzhe/article/details/47686591" target="_blank" rel="noopener">http://blog.csdn.net/geekzhe/article/details/47686591</a></li>
<li>Android必知必会–使用shape制作drawable素材 - 他叫自己Mr.张 - CSDN博客 <a href="http://blog.csdn.net/ys743276112/article/details/46227945#" target="_blank" rel="noopener">http://blog.csdn.net/ys743276112/article/details/46227945#</a></li>
<li>android shape的使用 - 炽飞 - 博客园 <a href="https://www.cnblogs.com/cyanfei/archive/2012/07/27/2612023.html" target="_blank" rel="noopener">https://www.cnblogs.com/cyanfei/archive/2012/07/27/2612023.html</a></li>
<li>Android Studio 如何用自带图标库和开源图标库_百度经验 <a href="https://jingyan.baidu.com/article/6d704a133a1d5f28db51cacc.html" target="_blank" rel="noopener">https://jingyan.baidu.com/article/6d704a133a1d5f28db51cacc.html</a></li>
<li><strong>可动态显示圆形图像或圆形文字的AvatarImageView - Carbs的博客 - CSDN博客 <a href="http://blog.csdn.net/yeah0126/article/details/51543830" target="_blank" rel="noopener">http://blog.csdn.net/yeah0126/article/details/51543830</a> </strong></li>
<li>Android中ImageView和ImageButton的比较详解 - CSDN博客 <a href="http://blog.csdn.net/qq_27376951/article/details/51810829" target="_blank" rel="noopener">http://blog.csdn.net/qq_27376951/article/details/51810829</a></li>
<li>探索Android中selector和shape的结合使用 - CSDN博客 <a href="http://blog.csdn.net/qq_20785431/article/details/50198315" target="_blank" rel="noopener">http://blog.csdn.net/qq_20785431/article/details/50198315</a></li>
<li>ImageView设置selector不起作用原因 - CSDN博客 <a href="http://blog.csdn.net/lyankj/article/details/62871799" target="_blank" rel="noopener">http://blog.csdn.net/lyankj/article/details/62871799</a></li>
<li>【android】巧用android:divider属性设置LinearLayout中元素之间的间隔 - CSDN博客 <a href="http://blog.csdn.net/u011494050/article/details/41774263" target="_blank" rel="noopener">http://blog.csdn.net/u011494050/article/details/41774263</a></li>
<li>安卓学习笔记—解决在在Edittext输入的时候，输入框被软键盘遮挡部分内容的问题（一） - 紫色飞鱼儿的博客 - CSDN博客 <a href="http://blog.csdn.net/juhua2012/article/details/51983460" target="_blank" rel="noopener">http://blog.csdn.net/juhua2012/article/details/51983460</a></li>
<li>Android EditText被软键盘遮盖处理 - soar. - 博客园 <a href="https://www.cnblogs.com/endure/p/5957836.html" target="_blank" rel="noopener">https://www.cnblogs.com/endure/p/5957836.html</a>  </li>
</ol>
<hr>
<h1 id="日志"><a href="#日志" class="headerlink" title="日志"></a>日志</h1><p><strong>2017年11月25日</strong></p>
<ol>
<li><strong>【新增】右分页制作填表界面</strong></li>
<li>【修改】右分页使用TableLayout</li>
<li>【修改】登录界面软键盘回车键显示为“进入”</li>
<li>【修改】layout_main标题栏由系统默认颜色改为纯白色</li>
<li>【修改】将EditText样式变为矩形外框</li>
<li>【新增】给TableLayout裹上CardView“外衣”</li>
<li>【新增】扩展信息卡片布局</li>
</ol>
<p><strong>2017年11月27日</strong></p>
<ol>
<li>【新增】右分页“保存”按钮的点击背景变色</li>
<li>【修改】在分页中右滑键盘自动收起，且左滑不自动打开</li>
</ol>
<p><strong>2017年11月29日</strong></p>
<ol>
<li><strong>【更新】重新制作右分页</strong></li>
</ol>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
        <div class="post-widgets">
        

        

        
          
          <div id="needsharebutton-postbottom">
            <span class="btn">
              <i class="fa fa-share-alt" aria-hidden="true"></i>
            </span>
          </div>
        
        </div>
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/1125123725/" rel="next" title="EditText密码输入错误后重新获取焦点并自动弹出软键盘.md">
                <i class="fa fa-chevron-left"></i> EditText密码输入错误后重新获取焦点并自动弹出软键盘.md
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/1128200920/" rel="prev" title="使用Git Bash将本地项目push到远程版本库">
                使用Git Bash将本地项目push到远程版本库 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
      <div id="lv-container" data-id="city" data-uid="MTAyMC8zNDI4MS8xMDgxOA=="></div>
    </div>

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="http://ozurciydg.bkt.clouddn.com/18-2-12/72826549.jpg"
                alt="Likianta" />
            
              <p class="site-author-name" itemprop="name">Likianta</p>
              <p class="site-description motion-element" itemprop="description">Android Dev</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">73</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">8</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">2</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="http://blog.csdn.net/likianta" target="_blank" title="CSDN">
                      
                        <i class="fa fa-fw fa-crosshairs"></i>CSDN</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="mailto:sheerish@qq.com" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/likianta" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://weibo.com/5441767757/profile?rightmod=1&wvr=6&mod=personinfo" target="_blank" title="Weibo">
                      
                        <i class="fa fa-fw fa-weibo"></i>Weibo</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1-先看最终效果图"><span class="nav-text">1. 先看最终效果图</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2-制作右分页填表界面TableLayout"><span class="nav-text">2. 制作右分页填表界面TableLayout</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#2-1-第一行：标题"><span class="nav-text">2.1. 第一行：标题</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-2-第二行：帐号"><span class="nav-text">2.2. 第二行：帐号</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-3-第三行：密码"><span class="nav-text">2.3. 第三行：密码</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-4-第四行：绑定"><span class="nav-text">2.4. 第四行：绑定</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-5-第五行：URL"><span class="nav-text">2.5. 第五行：URL</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-6-第六行（最后一行）：备注栏"><span class="nav-text">2.6. 第六行（最后一行）：备注栏</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2-7-给TableLayout包裹“外衣”"><span class="nav-text">2.7. 给TableLayout包裹“外衣”</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3-制作头像布局"><span class="nav-text">3. 制作头像布局</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#3-1-头像布局"><span class="nav-text">3.1. 头像布局</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2-CircleImageView"><span class="nav-text">3.2. CircleImageView</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#4-完善布局"><span class="nav-text">4. 完善布局</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#4-1-制作底部的保存按钮"><span class="nav-text">4.1. 制作底部的保存按钮</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-2-解决bug：左右滑动布局，键盘不会自动收起来"><span class="nav-text">4.2. 解决bug：左右滑动布局，键盘不会自动收起来</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#5-其他说明"><span class="nav-text">5. 其他说明</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#5-1-ImageView中设置的selector不起作用的解决方法"><span class="nav-text">5.1. ImageView中设置的selector不起作用的解决方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-2-TableLayout中为什么使用ImageView而不使用ImageButton？"><span class="nav-text">5.2. TableLayout中为什么使用ImageView而不使用ImageButton？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-3-关于TableLayout"><span class="nav-text">5.3. 关于TableLayout</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-4-Android-Studio查找替换快捷键"><span class="nav-text">5.4. Android Studio查找替换快捷键</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#6-更新修复"><span class="nav-text">6. 更新修复</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#6-1-【修改】主界面标题栏颜色改为纯白色"><span class="nav-text">6.1. 【修改】主界面标题栏颜色改为纯白色</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-2-【修改】登录界面软键盘回车键显示为“进入”"><span class="nav-text">6.2. 【修改】登录界面软键盘回车键显示为“进入”</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#相关参考"><span class="nav-text">相关参考</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#日志"><span class="nav-text">日志</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; 2017 &mdash; <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Likianta</span>

  
</div>


  <div class="powered-by">
    <i class="fa fa-user-md"></i>
    <span id="busuanzi_container_site_pv">
      Site visitors:<span id="busuanzi_value_site_pv"></span>
    </span>
  </div>

<!--
  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Mist</a> v5.1.3</div>

-->



<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">Site words total count:75.2k</span>
</div>
        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.3"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.3"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.3"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.3"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.3"></script>



  


  




	





  





  
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  












  





  

  

  

  
  
  
  <link rel="stylesheet" href="/lib/needsharebutton/needsharebutton.css">

  
  
  <script src="/lib/needsharebutton/needsharebutton.js"></script>

  <script>
    
      pbOptions = {};
      
          pbOptions.iconStyle = "box";
      
          pbOptions.boxForm = "horizontal";
      
          pbOptions.position = "bottomCenter";
      
          pbOptions.networks = "Weibo,Wechat,Douban,QQZone,Evernote";
      
      new needShareButton('#needsharebutton-postbottom', pbOptions);
    
    
  </script>

  

  

  

  

</body>
</html>
